@import '../common.scss';

.triple-border {
  position: relative;
  padding: 2px;
  border-radius: 5px 0;
  transition:
    color 0.1s ease-in-out,
    background-color 0.1s ease-in-out;

  &::before,
  &::after {
    z-index: 2;
    content: '';
    border: 2px solid var(--color-text);
    border-radius: 5px;
    position: absolute;
    width: calc(100% + 5px);
    height: calc(100% + 5px);
  }

  &::before {
    left: 0px;
    top: 0px;
  }

  &::after {
    bottom: 0px;
    right: 0px;
  }
}

.triple-border__container {
  position: relative;
  overflow: hidden;
  border-radius: 3px 0;
}

.triple-border--large-margin {
  margin: 13px;
  padding: 3px;

  &::before,
  &::after {
    content: '';
    border-width: 3px;
    border-radius: 13px;
    width: calc(100% + 13px);
    height: calc(100% + 13px);
  }

  .triple-border__container {
    border-radius: 10px 0;
  }
}

.triple-border__logo {
  padding: 0.2rem;
  font-size: 1.111rem;
  font-weight: $font-weight-semi-bold;
}

.triple-border__logo--small {
  html[data-theme='dark'] .triple-border:hover & {
    color: $black !important;
  }
}

.triple-border__return-tasks {
  font-size: 0.9rem;
  padding: 1rem 0.2rem;
}
